import { useEffect, useState } from "react";
import '@tli/ui/globals.css'
import { ApiTable } from './components/api-table/ApiTable'
import i18nJson from "./i18n/cn.json";

type i18nJsonKey = keyof typeof i18nJson;
export const TLIDB_BASE_URL = "https://tlidb.com/cn/";

export type DataApi = {
  id: string;
  name: string;
  path: string;
  group?: string;
};

function App() {
  const [apis, setApis] = useState<DataApi[]>([])
  useEffect(() => {
    fetch(TLIDB_BASE_URL, { mode: 'cors' })
      .then((res) => res.text())
      .then((htmlText) => {
        const parser = new DOMParser()

        // Parse the text
        const html = parser.parseFromString(htmlText, 'text/html')

        // Get the hero api list
        const heroApis: DataApi[] = []
        html
          .querySelectorAll('div.page div.page-content div.card.mt-2 a[data-bs-toggle=tooltip]')
          .forEach((hero) => {
            const heroPath = hero.getAttribute('href')
            const heroName = hero.getAttribute('data-bs-title')

            if (heroPath && heroName) {
              heroApis.push({
                id: heroPath,
                name: heroName,
                path: heroPath,
              })
            }
          })
        console.log(heroApis)

        // Get the talent api list
        const talentApis: DataApi[] = []
        html
          .querySelectorAll('div.page div.page-content div.row.mt-2 div.col div.card')
          .forEach((talentGroup) => {
            const talentGroupName = talentGroup.querySelector('div.card-header')?.textContent
            if (talentGroupName) {
              talentGroup
                .querySelectorAll('div.card-body a[data-bs-toggle=tooltip]')
                .forEach((talent) => {
                  const talentPath = talent.getAttribute('href')
                  const talentName = talent.getAttribute('data-bs-title')

                  if (talentPath && talentName) {
                    talentApis.push({
                      id: talentPath,
                      name: talentName,
                      path: talentPath,
                      group: talentGroupName,
                    })
                  }
                })
            }
          })
        console.log(talentApis)

        const itemApis: DataApi[] = []
        html
          .querySelectorAll('div.page div.page-content div.row.mt-2 div.col-lg-6 a.p-2')
          .forEach((item) => {
            const itemPath = item.getAttribute("href");
												const itemNameKey = item.getAttribute("data-i18n");
												const itemName = itemNameKey
													? i18nJson[itemNameKey as i18nJsonKey]
													: item.innerHTML;

												if (itemPath && itemName) {
													itemApis.push({
														id: itemPath,
														name: itemName,
														path: itemPath,
														group: "英雄特性",
													});
												}
          })
        console.log(itemApis)
        const allApis = [
          ...heroApis,
          ...talentApis,
          ...itemApis,
          { id: 'Pactspirit', name: '契灵', path: 'Pactspirit' },
        ]
        const tempMap = new Map<string, DataApi>()
        allApis.forEach((api) => {
          if (!tempMap.has(api.id)) {
            tempMap.set(api.id, api)
          }
        })
        setApis(Array.from(tempMap.values()))
      })
  }, []);

  return (
    <>
      <div className="mx-16">
        <ApiTable apis={apis} />
      </div>
    </>
  )
}

export default App;
